<script>
	import anime from 'animejs';

	function play(params) {
		let t = anime.timeline({
			// duration: 800,
			// autoplay: false,
			direction: 'alternate'
		});
		t.add(
			{
				targets: '.hamburger .lineone',
				translateY: 8
			},
			400
		)
			.add(
				{
					targets: '.hamburger .linetwo',
					opacity: 0
				},
				420
			)
			.add(
				{
					targets: '.hamburger .linethree',
					translateY: -8
				},
				400
			)
			.add(
				{
					targets: '.hamburger',
					rotate: '2turn'
				},
				500
			)
			.add(
				{
					targets: '.hamburger .lineone',
					rotate: '45deg'
				},
				700
			)
			.add(
				{
					targets: '.hamburger .linethree',
					rotate: '-45deg'
				},
				700
			);
	}
	function menover(params) {
		anime({
			targets: '.done .gout line',
			scaleX: [1, 1.5],
			stroke: ['#fff', '#f40'],
			direction: 'alternate',
			easing: 'easeInOutSine',
			delay: anime.stagger(100),
			duration: 500
		});
	}
</script>

<svg
	class="hamburger done"
	xmlns="http://www.w3.org/2000/svg"
	viewBox="0 0 100 100"
	on:mouseover={menover}
	on:click={play}
>
	<g class="gout">
		<line x1="25" y1="42" x2="75" y2="42" class="lineone" />
		<line x1="25" y1="50" x2="75" y2="50" class="linetwo" />
		<line x1="25" y1="58" x2="75" y2="58" class="linethree" />
	</g>
</svg>

<style>
	.done svg {
		width: 500px;
	}
	line {
		stroke: #fff;
		stroke-width: 4px;
		fill: none;
		stroke-miterlimit: 10;
		stroke-linecap: round;
		transform-box: fill-box;
		transform-origin: center;
	}
</style>
